<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>模板设计</title>
	<meta name="decorator" content="default"/>

	<link href="${ctxStatic}/draging/css/style.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/draging/js/drag.js" type="text/javascript"></script>
    <style>.form-horizontal .control-label{width: 80px;} .form-horizontal .controls{margin-left: 80px;}</style>
    <script>
        $(function(){
            closeTip();

            $('.box-3 dl').each(function(){
                $(this).dragging({
                    move : 'both',
                    randomPosition : false,
                    width:"${eleTemplet.width}px",
                    height:"${eleTemplet.height}px"
                });
            });
        });

        var eleTempletSourceList = {};
        <c:forEach items="${eleTemplet.eleTempletSourceList}" var="source">
            var ${source.sourceType} = {};
            ${source.sourceType}.id='${source.id}';
            ${source.sourceType}.sourceId='${source.sourceId}';
            ${source.sourceType}.sourceType='${source.sourceType}';
            ${source.sourceType}.width=0+${0+source.width};
            ${source.sourceType}.height=0+${0+source.height};
            ${source.sourceType}.xloc=0+${0+source.xloc};
            ${source.sourceType}.yloc=0+${0+source.yloc};
            ${source.sourceType}.respath="${source.respath}";
            ${source.sourceType}.cfgfile="${source.cfgfile}";
            ${source.sourceType}.postion="${source.postion}";

            eleTempletSourceList.${source.sourceType} = ${source.sourceType};
        </c:forEach>

        function selectSource(source) {
            $("#temSourceId").val(source.id);
            $("input[name='sourceId']").val(source.sourceId);
            $("input[name='sourceType']").val(source.sourceType);
            $("#source_width").val(source.width);
            $("#source_height").val(source.height);

            var xloc = $("input[name='xloc']").val();
            var yloc = $("input[name='yloc']").val();
            if(xloc == '' || yloc == '' )
            {
                xloc = source.xloc;
                yloc = source.yloc;
            }
            $("input[name='xloc']").val(xloc);
            $("input[name='yloc']").val(yloc);

            $("input[name='respath']").val(source.respath);
            $("input[name='cfgfile']").val(source.cfgfile);
            $("input[name='postion']").val(source.postion);
        }

        function setSourcePosition(sourceType){
            var source = eleTempletSourceList[sourceType];
            source.xloc = $("input[name='xloc']").val();
            source.yloc = $("input[name='yloc']").val();
            eleTempletSourceList[sourceType] = source;
        }

        function inputChange(obj){
            var sourceType = $("input[name='sourceType']").val();
            var source = eleTempletSourceList[sourceType];
            var name = obj.name;
            source[name] = $(obj).val();

            var obj_img = $("#img_"+sourceType);
            if(name == 'width' || name == 'height'){
                obj_img.css(name,$(obj).val()+"px");
            }else if(name == 'xloc'){
                obj_img.parent().css('left',$(obj).val()+"px");
            }else if(name == 'yloc'){
                obj_img.parent().css('top',$(obj).val()+"px");
            }
        }
        function saveTempeteSource(){
            $.ajax({
                type: "post",
                url: "${ctx}/templet/eleTemplet/saveTempeteSource",
                data: {"eleTempletId": "${eleTemplet.id}", "eleTempletSourceList": JSON.stringify(eleTempletSourceList)},
                dataType: "text",
                success: function(msg) {
                    if('success' == msg)
                    window.location.href="${ctx}/templet/eleTemplet/?repage";
                }
            });
        }
    </script>
</head>
<body>
    <div class='box box-3' style="width: ${eleTemplet.width}px;height: ${eleTemplet.height}px;float: left;">
        <c:forEach items="${eleTemplet.eleTempletSourceList}" var="source">
            <dl onmousedown="selectSource(eleTempletSourceList.${source.sourceType})" onmouseup="setSourcePosition('${source.sourceType}')"
                style="position: absolute;left: ${source.xloc}px;top: ${source.yloc}px;">
                <img id="img_${source.sourceType}" src="${ctxStatic}/draging/img/03.jpg" style="width:${source.width}px;height:${source.height}px" title="${source.sourceType}">
            </dl>
        </c:forEach>
    </div>
    <div style="width: 230px;float: left;">
        <form:form id="inputForm" modelAttribute="eleTempletSource" action="${ctx}/source/alarm/eleSourceAlarmGroup/save" method="post" class="form-horizontal">
            <input type="hidden" id="temSourceId" name="id"/>
            <input type="hidden" name="sourceId"/>
            <input type="hidden" name="sourceType"/>
            <div class="control-group">
                <label class="control-label">宽：</label>
                <div class="controls">
                    <input id="source_width" name="width" class="input-small " onkeyup="inputChange(this);"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">高：</label>
                <div class="controls">
                    <input id="source_height" name="height" class="input-small " onkeyup="inputChange(this);"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">X起始：</label>
                <div class="controls">
                    <input id="xloc" name="xloc" class="input-small " onkeyup="inputChange(this);"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Y起始：</label>
                <div class="controls">
                    <input id="yloc" name="yloc" class="input-small " onkeyup="inputChange(this);"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">文件位置：</label>
                <div class="controls">
                    <input name="respath" class="input-small " onkeyup="inputChange(this);"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">配置文件：</label>
                <div class="controls">
                    <input name="cfgfile" class="input-small " onkeyup="inputChange(this);"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">postion：</label>
                <div class="controls">
                    <input name="postion" class="input-small " onkeyup="inputChange(this);"/>
                </div>
            </div>
        </form:form>
    </div>


    <div class="form-actions">
        <shiro:hasPermission name="source:alarm:eleSourceAlarmGroup:edit">
            <input id="btnSubmit" class="btn btn-primary" type="button" value="保 存" onclick="saveTempeteSource()"/>&nbsp;
        </shiro:hasPermission>
        <input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
    </div>
</body>
</html>